<template>
  <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
  >
    <!--副标题-->
    <a-form-model-item ref="name" label="副 标 题" prop="title">
      <a-input
          v-model="form.title"
          @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        "
      />
    </a-form-model-item>
    <!--商品描述-->
    <a-form-model-item label="商品描叙" prop="desc">
      <a-input v-model="form.desc" type="textarea" />
    </a-form-model-item>
    <!--下拉选择-->
    <a-form-model-item label="商品类目" prop="region">
      <a-select v-model="form.category" placeholder="选择类目">
        <a-select-option value="shanghai">
          Zone one
        </a-select-option>
        <a-select-option value="beijing">
          Zone two
        </a-select-option>
      </a-select>
      <a-select v-model="form.c_items" placeholder="选择所属类目">
        <a-select-option value="shanghai">
          Zone one
        </a-select-option>
        <a-select-option value="beijing">
          Zone two
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <!--商品标签-->
    <a-form-model-item ref="name" label="商品标签" prop="tags">
      <a-input
          v-model="form.tags"
          @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        "
      />
    </a-form-model-item>
  </a-form-model>
</template>

<script>
export default {
name: "index",
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      //商品数据
      form: {
        title: '',//商品名称
        category:"",//商品类目
        c_items:"",//商品子类目
        tags:"",//商品标签
        desc: '',//商品描叙
      },
      //商品验证规则
      rules: {
        //标题验证
        title: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        //商品标签
        tags: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
      },
    }
  },
}
</script>

<style scoped>

</style>